<template>
  <div class="carbonQuota">
    <!-- 资产结构    -->
    <a-row class="Quotas">
      <a-col :md="18">
        <p class="title">配额管理</p>
        <div class="text">
          企业依法取得向大气排放温室气体(二氧化碳等)的权利，可称之为“碳排放权”。经政府主管部门核定，企业会取得一定时期内“合法”排放温室气体的总量，即为配额。当企业实际排放量出所分配的碳配额，出部分需购买；当企业实际排放少于碳配额，结余部分则可在碳交易市场上出售。控排企业的碳排放配额发放和履约是由国相关主管机构监督执行的，是具有行政和法律约束力的履约机制。
        </div>
      </a-col>
      <a-col :md="6">
        <img src="@/assets/img/assets/bg_4.png" />
      </a-col>
    </a-row>
    <ul class="tab">
      <li @click="changeActiveIdx(1)" :class="[idx == 1 ? 'active' : '']">配额总览</li>
      <li @click="changeActiveIdx(2)" :class="[idx == 2 ? 'active' : '']">配额流水</li>
      <li @click="changeActiveIdx(3)" :class="[idx == 3 ? 'active' : '']">冻结配额</li>
      <li @click="changeActiveIdx(4)" :class="[idx == 4 ? 'active' : '']">核证排放量</li>
      <li @click="changeActiveIdx(5)" :class="[idx == 5 ? 'active' : '']">预测配额</li>
    </ul>
    <!-- 配额管理 -->
    <quotaOverview v-if="idx == 1"></quotaOverview>
    <!-- 可用配额 -->
    <availableQuota :data="quotaFlow"  v-if="idx == 2"></availableQuota>
    <!-- 冻结配额 -->
    <freezeQuota v-if="idx == 3"></freezeQuota>
    <!-- 核证排放量 -->
    <discharge v-if="idx == 4"></discharge>
    <!-- 预测配额 -->
    <forecast v-if="idx == 5"></forecast>
    
  </div>
</template>

<script>

import quotaOverview from '@/components/Assets/Quota/quotaOverview'
import availableQuota from '@/components/Assets/Quota/availableQuota'
import freezeQuota from '@/components/Assets/Quota/freezeQuota'
import discharge from '@/components/Assets/Quota/discharge'
import forecast from '@/components/Assets/Quota/forecast'


export default {
  components: {

    // LineChartMultid,
    quotaOverview,
    availableQuota,
    freezeQuota,
    discharge,
    forecast
  },
  data() {
    return {
      idx: 1,
      description: '统计页面',
      height: 300,
      columns: [
        {
          title: '时间周期',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '碳余额(吨)',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '最高价(元/吨)',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '最高资产净值(元)',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '均价资产净值(元)',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '收盘碳价(元/吨)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '变动金额(元)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '资产净值(元)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
      columns1: [
        {
          title: '配额/CCER编号',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '履约类型',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '履约数量tCO₂e',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '履约产品',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '归属交易所',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '归属组织',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '变更时间',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '记录时间',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
    }
  },
  created() {

  },
  methods: {

    changeActiveIdx(idx) {
      this.idx = idx
   
    },

  },
}
</script>

<style lang="scss" scoped>
.carbonQuota {
  background: #fff;
  padding: 20px;
  background-size: cover;
  .Quotas {
    padding: 20px 20px 0 20px;
    background: linear-gradient(231deg, #ddf3fb, #eefaff);
    border-radius: 6px;
    .title {
      font-size: 16px;
    }
    .text {
      font-size: 12px;
    }
    img {
      width: 80%;
    }
  }
  .tab {
    display: flex;
    margin: 20px 0;
    flex-direction: row;
    padding: 0;
    li {
      list-style: none;
      padding: 6px 14px;
      font-size: 12px;
      margin-right: 6px;
      // background: #0c67ee;
      border-radius: 20px;
      color: #333;
      cursor: pointer;
    }
  }
  .module {
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
  }

  .flex_ {
    display: flex;
    width: fit-content;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    .title {
      color: #999;
      margin-right: 10px;
    }
    .select {
      color: #000;
      margin-right: 4px;
    }
    i {
      color: #000;
    }
  }
}
.active {
  list-style: none;
  padding: 6px 14px;
  font-size: 12px;
  margin-right: 6px;
  background: #0c67ee;
  border-radius: 20px;
  color: #fff !important;
}
</style>